<template>
    <div class="classify">
        <left-com :navList="navList"></left-com>
        <right-com :list="list"></right-com>
    </div>
</template>

<script>

import LeftCom from '@/components/left-com.vue';
import rightCom from '@/components/right-com.vue';
export default {
    data(){
        return {
            list:[]
        }
    },
    components:{
        LeftCom,
        rightCom
    },
    created(){
        this.$http.get('/api/list').then(res => {
            if(res.data.code === 1){
                this.list = res.data.data;
            }
        })
    },
    computed:{
        navList(){
            return Object.keys(this.list)
        }
    }
}
</script>

<style lang="scss">
    .classify{
        width:100%;
        height: 100%;
        display: flex;
        overflow: hidden;
    }

    .left{
        width: 100px;
        height:100%;
        border-right:1px solid gray;
    }

    .right{
        flex:1;
        height: 100%;
        overflow: hidden;
    }
</style>